<template>
	<div>
		<header class="header">
			<div class="header-left">
				<mt-button icon="back" @click.native="back"></mt-button>
			</div>
			<div class="header-right">
				<mt-navbar v-model="activeIndex">
					<mt-tab-item id="1">选项一</mt-tab-item>
					<mt-tab-item id="2">选项二</mt-tab-item>
					<mt-tab-item id="3">选项三</mt-tab-item>
				</mt-navbar>
			</div>
		</header>
		<!--切换公用-->
		<section class="section">
			<div>
				当前选择：
				<p>轮胎:{{selected.luntai}}</p>
				<p>外壳：{{selected.waike}}</p>
			</div>	
			<mt-tab-container v-model="typeIndex" class="contentTab">
				<mt-tab-container-item id="轮胎">
					<template v-for="item in dataList.luntaiData">
						<mt-button @click.native="handleChangeLuntai(item)" type="primary" class="margin20">{{item}}</mt-button>
					</template>
				</mt-tab-container-item>
				<mt-tab-container-item id="外壳">
					<template v-for="item in dataList.waikeData">
						<mt-button @click.native="handleChangeWaike(item)" type="primary" class="margin20">{{item}}</mt-button>
					</template>
				</mt-tab-container-item>
			</mt-tab-container>
			<mt-tabbar v-model="typeIndex" fixed>
				<mt-tab-item id="轮胎">轮胎</mt-tab-item>
				<mt-tab-item id="外壳" v-if="activeIndex==='1'">外壳</mt-tab-item>
			</mt-tabbar>
		</section>
	</div>
</template>

<script>
	export default {
		name: 'autoshow',
		data() {
			return {
				activeIndex: '1',
				typeIndex: '轮胎',
				dataList:{},
				dataListOne: {
					img: './assets/logo.png',
					luntaiData: ["1-one", "1-two", "1-three"],
					waikeData: ['1-red', '1-yellow', '1-green']
				},
				dataListTwo: {
					img: './assets/logo.png',
					luntaiData: ["2-one", "2-two", "2-three"],
					waikeData: ['2-red', '2-yellow', '2-green']
				},
				dataListThree: {
					img: './assets/logo.png',
					luntaiData: ["3-one", "3-two", "3-three"],
					waikeData: ['3-red', '3-yellow', '3-green']
				},
				selected: {
					luntai: '默认',
					waike: '默认'
				}
			}
		},
		watch:{
			"activeIndex":{
				deep:true,
				handler(val){
					if(this.activeIndex!=='1'){
						this.typeIndex='轮胎'
					}
				}
			}
		},
		methods: {
			back() {
				this.$router.go(-1);
			},
			handleChangeLuntai(item) {
				this.selected.luntai=item
			},
			handleChangeWaike(item){
				this.selected.waike=item
			}
		},
		mounted(){
			if(this.$route.params.id==='1'){
				this.dataList=this.dataListOne;
			}
			else if(this.$route.params.id==='2'){
				this.dataList=this.dataListTwo;
			}
			else{
				this.dataList=this.dataListThree;
			}
		}
	}
</script>

<style scoped>
	.header {
		display: table;
	}
	
	.header-left {
		display: table-cell;
		width: 40px;
	}
	
	.header-right {
		display: table-cell;
	}
	
	.mint-tab-item-label {
		font-size: 16px;
	}
	
	.mint-tab-item {
		padding: 15px 0
	}
	
	.contentTab {
		height: 60px;
		position: fixed;
		bottom: 50px;
		left: 0;
	}
</style>